<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收银台</title>
    <link rel="stylesheet" href="./css/buy.css">
    <link rel="stylesheet" href="./css/modal.css">
    <script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="header">
    <div class="title">收银台</div>
    <div class="user-info" id="info">用户: 张三</div>
</div>
<div class="container">
    <div class="product-info">
        <h2 id="title">商品标题</h2>
        <p id="price">价格: ¥100.00</p>
    </div>
    <div class="payment-methods">
        <h2>选择支付方式</h2>
        <div class="selected-method" onclick="showPaymentModal()">
            <img src="./images/buy/icon64_appwx_logo.png" alt="微信支付">
            <span>微信支付</span>
        </div>
    </div>
    <button class="pay-button" onclick="showModal()">确认支付</button>
    <button class="pay-button" onclick="quit()">取消支付</button>
</div>

<div id="paymentModal" class="modal" onclick="closeModal(event)">
    <div class="modal-content">
        <span class="close" onclick="closeModal(event)">×</span>
        <h2>输入支付密码</h2>
        <div class="password-container">
            <input style="display: none;" type="password" id="password" maxlength="6" readonly>
            <div class="grid">
                <div class="cell" id="cell1"></div>
                <div class="cell" id="cell2"></div>
                <div class="cell" id="cell3"></div>
                <div class="cell" id="cell4"></div>
                <div class="cell" id="cell5"></div>
                <div class="cell" id="cell6"></div>
            </div>
        </div>
        <div class="keypad">
            <button onclick="addNumber(1)">1</button>
            <button onclick="addNumber(2)">2</button>
            <button onclick="addNumber(3)">3</button>
            <button onclick="addNumber(4)">4</button>
            <button onclick="addNumber(5)">5</button>
            <button onclick="addNumber(6)">6</button>
            <button onclick="addNumber(7)">7</button>
            <button onclick="addNumber(8)">8</button>
            <button onclick="addNumber(9)">9</button>
            <button onclick="addNumber(0)">0</button>
            <button onclick="clearPassword()">清除</button>
            <button onclick="submitPassword()">确认</button>
        </div>
    </div>
</div>
<div id="infoModal" class="infoModal">
    <div class="infoModalContent">
        <p id="infoTitle"></p>
        <button id="confirmBtn">确定</button>
    </div>
</div>
<div id="paymentMethodModal" class="payment-modal" onclick="closeModal(event)">
    <div class="payment-modal-content">
        <span class="close" onclick="closeModal(event)">×</span>
        <h2>选择支付方式</h2>
        <div class="method" onclick="selectPaymentMethod('微信支付', './images/buy/icon64_appwx_logo.png')">
            <img src="./images/buy/icon64_appwx_logo.png" alt="微信支付">
            <span>微信支付</span>
        </div>
        <div class="method" onclick="selectPaymentMethod('支付宝', './images/buy/biao.png')">
            <img src="./images/buy/biao.png" alt="支付宝">
            <span>支&ensp;付&ensp;宝</span>
        </div>
    </div>
</div>
<script src="./js/buy.js"></script>
<script src="./js/modal.js"></script>
</body>
</html>
